<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>登录</title>
    <script src="//unpkg.com/vue"></script>
    <script src="//unpkg.com/element-plus@2.1.9"></script>
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="css/fontawesome-all.min.css" />
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <link rel="stylesheet" href="css/style.css" />

    <style>
      .el-button.is-round {
        border-radius: 49px;
      }

      .el-form-item {
        margin-bottom: 0;
      }

      .el-form-item.is-error .el-input__inner,
      .el-form-item.is-error .el-input__inner:focus,
      .el-form-item.is-error .el-select-v2__wrapper,
      .el-form-item.is-error .el-select-v2__wrapper:focus,
      .el-form-item.is-error .el-textarea__inner,
      .el-form-item.is-error .el-textarea__inner:focus {
        box-shadow: none;
      }

      .el-input {
        align-items: center;
        margin-right: 8px;
      }

      .el-input .el-input__icon {
        font-size: 1.4em;
      }
    </style>
  </head>

  <body>
    <div class="container" id="app">
      <div class="forms-container">
        <div class="signin-signup">
          <el-form
            ref="loginRef"
            :model="loginForm"
            :rules="loginRules"
            class="sign-in-form"
          >
            <h2 class="title">登录</h2>
            <div class="input-field">
              <i class="fa-solid fa-user"></i>
              <el-form-item prop="name">
                <el-input
                  v-model="loginForm.name"
                  placeholder="账号/手机号"
                  @keyup.enter="Login(loginForm)"
                />
              </el-form-item>
            </div>
            <div class="input-field">
              <i class="fa-solid fa-lock"></i>
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="密码"
                  autocomplete="off"
                  show-password
                  @keyup.enter="Login(loginForm)"
                />
              </el-form-item>
            </div>
            <el-button
              type="primary"
              :loading="loginLoading"
              @click="Login(loginForm)"
              class="btn form"
              round
            >
              {{loginLoading ? '登 录 中' : '登 录'}}
            </el-button>
          </el-form>
          <el-form
            ref="signUpRef"
            :model="signUpForm"
            :rules="signUpRules"
            class="sign-up-form"
          >
            <h2 class="title">注册</h2>
            <div class="input-field">
              <i class="fa-solid fa-user"></i>
              <el-form-item prop="name">
                <el-input v-model="signUpForm.name" placeholder="姓名/称呼" />
              </el-form-item>
            </div>
            <div class="input-field">
              <i class="fa-solid fa-phone"></i>
              <el-form-item prop="phone">
                <el-input v-model="signUpForm.phone" placeholder="手机号" />
              </el-form-item>
            </div>
            <div class="input-field">
              <i class="fa-solid fa-lock"></i>
              <el-form-item prop="password">
                <el-input
                  v-model="signUpForm.password"
                  type="password"
                  placeholder="密码"
                  autocomplete="off"
                  show-password
                />
              </el-form-item>
            </div>
            <div class="input-field">
              <i class="fa-solid fa-lock"></i>
              <el-form-item prop="confirmPassword">
                <el-input
                  v-model="signUpForm.confirmPassword"
                  type="password"
                  placeholder="确认密码"
                  autocomplete="off"
                  show-password
                />
              </el-form-item>
            </div>
            <el-button
              type="primary"
              :loading="signUploading"
              @click="SignUp(signUpForm)"
              class="btn form"
              round
            >
              {{signUploading ? '注 册 中' : '注 册'}}
            </el-button>
          </el-form>
        </div>
      </div>

      <div class="panels-container">
        <div class="panel left-panel">
          <div class="content">
            <h3>新用户 ?</h3>
            <p>输入您的信息成为我们的客户</p>
            <button class="btn transparent" id="sign-up-btn">注 册</button>
          </div>
          <img src="img/log.svg" class="image" alt="" />
        </div>
        <div class="panel right-panel">
          <div class="content">
            <h3>已有账号 ?</h3>
            <p>请登录以享受我们更多的服务</p>
            <button class="btn transparent" id="sign-in-btn">登 录</button>
          </div>
          <img src="img/register.svg" class="image" alt="" />
        </div>
      </div>
    </div>

    <script>
      const { createApp, ref, onBeforeMount, onMounted } = Vue;
      const { ElMessage } = ElementPlus;

      const app = createApp({
        setup() {
          const loginLoading = ref(false);
          const signUploading = ref(false);

          const loginRef = ref(null);
          const signUpRef = ref(null);

          const loginForm = ref({
            name: "",
            password: "",
          });

          const signUpForm = ref({
            name: "",
            phone: "",
            password: "",
            confirmPassword: "",
          });

          const loginRules = {
            name: [
              {
                required: true,
                message: "请输入账号/手机号",
                type: "string",
                trigger: "blur",
              },
            ],
            password: [
              {
                required: true,
                message: "请输入密码",
                type: "string",
                trigger: "blur",
              },
            ],
          };

          const signUpRules = {
            name: [
              {
                required: true,
                message: "请输入账号",
                type: "string",
                trigger: "blur",
              },
            ],
            phone: [
              {
                required: true,
                pattern: /^1[3-9]\d{9}$/,
                message: "请输入11位手机号",
                type: "string",
                trigger: "blur",
              },
            ],
            password: [
              {
                required: true,
                message: "请输入密码",
                type: "string",
                trigger: "blur",
              },
            ],
            confirmPassword: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("请再次输入密码"));
                  } else if (value !== signUpForm.value.password) {
                    callback(new Error("两次输入密码不一致!"));
                  } else {
                    callback();
                  }
                },
                type: "string",
                trigger: "blur",
              },
            ],
          };

          onBeforeMount(() => {
            loginLoading.value = false;
            signUploading.value = false;
          });

          onMounted(() => {
            const sign_in_btn = document.querySelector("#sign-in-btn");
            const sign_up_btn = document.querySelector("#sign-up-btn");
            const container = document.querySelector(".container")

            sign_in_btn.addEventListener("click", () => {
              container.classList.remove("sign-up-mode");
            });

            sign_up_btn.addEventListener("click", () => {
              container.classList.add("sign-up-mode");
            });
          });

          const Login = (formData) => {
            loginRef.value.validate((valid) => {
              if (valid) {
                loginLoading.value = true;
                // TODO: axios 登录请求
                setTimeout(() => {
                  ElMessage.success("登录成功");
                  loginLoading.value = false;
                }, 500);
              }
            });
          };

          const SignUp = (formData) => {
            signUpRef.value.validate((valid) => {
              if (valid) {
                signUploading.value = true;
                // TODO: axios 注册请求
                setTimeout(() => {
                  ElMessage.success("注册成功");
                  signUpRef.value.resetFields();
                  document.getElementById("sign-in-btn").click();
                }, 500);
              }
            });
            signUploading.value = false;
          };

          return {
            loginLoading,
            signUploading,
            loginRef,
            signUpRef,
            loginForm,
            signUpForm,
            loginRules,
            signUpRules,
            onMounted,
            Login,
            SignUp,
          };
        },
      })
        .use(ElementPlus)
        .mount("#app");
    </script>
  </body>
</html>
